<template>
  <div class="chart-content-wrapper">
    <top-filter :title="reportName">
      <single-list-filter-without-cb :filter="filter" :type="'years'"
                                     @confirmSingleSelect="chooseYear">
      </single-list-filter-without-cb>
      <double-check-filter @confirmDoubleSelect="planAreaSelect" defaultText="统筹区" :filter="filter" type="planArea"></double-check-filter>
      <single-list-filter @confirmSingleSelect="hospLevelSelect" defaultText="医院等级" :filter="filter" type="hospLevel"></single-list-filter>
      <single-list-filter-without-cb :defaultText="'医疗类别'" :filter="filter" :type="'insuredType'" @confirmSingleSelect="confirmSingleSelect"></single-list-filter-without-cb>
    </top-filter>
    <div id="myChart6" class="chart-type1"  style="height:70%"></div>
    <Summarize :showSummarizeText="conclusion"></Summarize>
  </div>
</template>

<script>
  import {getChartItem6} from "../../../api/api";
  import SingleListFilter from '../../last/filter/single-list-filter.vue'
  import DoubleCheckFilter from '../../last/filter/double-check-filter.vue'
  import TopFilter from '../../last/filter/top-filter1.vue'
  import Summarize from '../../last/summarize/summarize.vue'
  import SingleListFilterWithoutCb from '../../last/filter/single-list-filter-without-checkbox'
  export default {
    name: 'chart6',
    props:['isChange'],
    components:{
      SingleListFilter,
      DoubleCheckFilter,
      TopFilter,
      Summarize,
      SingleListFilterWithoutCb
    },
    data () {
      return {
        filter: JSON.parse(JSON.stringify(require('../../cnst/allInputs.json').data)),
        conclusion:'',
        year:'1',
        planAreaId:'1',
        hospitalId:'1',
        insuredTypeId:'1',
        reportName:'参保患者个人支出比例分解分析'
      }
    },
    mounted(){
      // 基于准备好的dom，初始化echarts实例
      this.myChart = this.$echarts.init(document.getElementById('myChart6') ,null, {renderer: 'canvas'});
      this.myChart.showLoading();
      return;
      this.getData();
    },
    watch:{
      isChange(){
        setTimeout(()=>{
          this.myChart.resize();
        },101)
      }
    },
    methods:{
      getData(){
        getChartItem6('report/queryInsuredSelfSpendRatio',this.year,this.planAreaId,this.hospitalId,this.insuredTypeId).then(res=>{
          let json = res.data;
          if(res.code==0){
            this.myChart.hideLoading();
            this.reportName = json.reportName;
            this.drawPie(json)
          }
        })
      },
      chooseYear(year){
        //选择年份
        this.year = year;
        this.getData();
      },
      planAreaSelect(filter){
        //统筹区
        this.planAreaId = filter.join(',');
        this.getData();
      },
      hospLevelSelect(filter){
        //医院级别
        this.hospitalId = filte.join(',');
        this.getData()
      },
      confirmSingleSelect(filter){
        //医疗类别
        this.insuredTypeId = filter;
        this.getData();
      },
      drawPie(json){
        this.conclusion = json.conclusion;
        // 绘制图表
        let proportion = json.allSpendList[1].value/(Number(json.allSpendList[0].value)+Number(json.allSpendList[1].value));//此值为个人支付比例
        let bigLineP = [{name: '', x: '34%', y: '65%'}, {x: '28%', y: '50%'}];
        let bigLineN = [{name: '', x: '66%', y: '65%'}, {x: '72%', y: '50%'}];
        let smallLine1 =  [{x: '28%', y: '40%'},{x: '28%', y: '50%'}];
        let smallLine2 = [{x: '72%', y: '40%'},{x: '72%', y: '50%'}];
        if( proportion <= 0.125){
          bigLineN = [{name: '', x: '51%', y: '40%'}, {x: '60%', y: '40%'}]
          smallLine2 =  [{x: '68%', y: '35%'}, {x: '60%', y: '40%'},];
        }else if( proportion >0.125 && proportion<0.25 ){
          bigLineN = [{name: '', x: '64%', y: '52%'}, {x: '72%', y: '50%'}];
        }else if(proportion > 0.75&&proportion<0.885){
          bigLineP = [{name: '', x: '36%', y: '52%'}, {x: '28%', y: '50%'}]
        }else if(proportion >=0.885){
          bigLineP= [{name: '', x: '47%', y: '40%'}, {x: '38%', y: '40%'}]
          smallLine1 =  [{x: '32%', y: '35%'}, {x: '38%', y: '40%'}];
        }
        this.myChart.setOption({
          title : {
            subtext: '单位：万元',
            left:'4%',
            x:'left',
            subtextStyle:{
              color:'#fff'
            }
          },
          tooltip : {
           /* trigger: 'item',*/
            show:true,
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: [{
            left: 'center',
            top:'bottom',
            itemWidth:10,
            itemHeight:10,
            itemGap:30,
            textStyle:{
              color:'#fff'
            },
            data: [{name:'统筹基金支付比例',icon: 'circle',},{name:'个人支付比例',icon: 'circle',}]
          },{
            orient: 'vertical',
            left: '0%',
            top:'14%',
            textStyle:{
              color:'#fff'
            },
            itemWidth:10,
            itemHeight:10,
            data: [{name:'统筹基金',icon: 'circle',},{name:'大病补助',icon: 'circle',},{name:'公务员补助',icon: 'circle',}]
          },{
            orient: 'vertical',
            left: '86%',
            top:'14%',
            textStyle:{
              color:'#fff'
            },
            itemWidth:10,
            itemHeight:10,
            data: [{name:'个人现金',icon: 'circle',},{name:'个人账户',icon: 'circle',}]
          }],
          series : [
            {
              name: '占比',
              type: 'pie',
              radius : '50%',
              center: ['50%', '65%'],
              data: json.allSpendList,
              markLine:{
                symbol:'none',
                silent: true,
                lineStyle: {
                  type: 'solid',
                 color: '#ffd66a'
                },
                data: [bigLineP,]
              },
              label:{
                show:true,
                position:'inside',
                formatter:'{d}%\n{c}',
                fontSize:'16',
                color:'black'
              },
              itemStyle:{
                color: function(params) {
                  // build a color map as your need.
                  let colorList = ['#ff6a93','#ffd66a'];
                  return colorList[params.dataIndex]
                },
              },
            },{
              name: '统筹基金支付比例占比',
              type: 'pie',
              radius : '30%',
              center: ['25%', '25%'],
              markLine:{
                symbol:'none',
                silent: true,//图形是否不响应和触发鼠标事件 默认为 false，即响应和触发鼠标事件。
                lineStyle:{
                  type: 'solid',
                  color: '#ffd66a'
                },
                data: [smallLine1]
              },
              itemStyle:{
                color: function(params) {
                  // build a color map as your need.
                  let colorList = ['#9de5f3','#ffedb2','#ffd66a'];
                  return colorList[params.dataIndex]
                },
              },
              data:json.planSpendList,
              label:{
                show:true,
                position:'inside',
                formatter:'{d}%',
                fontSize:'14',
                color:'black'
              },
            },{
              name: '个人支付比例占比',
              type: 'pie',
              radius : '30%',
              center: ['75%', '25%'],
              data:json.selfSpendList,
              itemStyle:{
                color: function(params) {
                  // build a color map as your need.
                  let colorList = ['#ffacc3','#ff6a93'];
                  return colorList[params.dataIndex]
                },
              },
              markLine:{
                symbol:'none',
                silent: true,
                lineStyle:{
                  type: 'solid',
                  color: '#ff6a93'
                },
                data: [smallLine2,bigLineN]
              },
              label:{
                show:true,
                position:'inside',
                formatter:'{d}%\n{c}',
                fontSize:'14',
                color:'black'
              },
            }
          ]

        })
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
